<template>
    <NodeContainer :title="data.typeName" :icon="data.icon" :has-more-options="true" v-bind="$attrs">
        <div class="node-content">
            <div class="mcp-name">{{ data.mcpName || '未选择MCP' }}</div>
            <slot></slot>
        </div>
    </NodeContainer>

    <Handle id="a" type="target" :position="Position.Left" />
    <Handle id="a" type="source" :position="Position.Right" />
</template>

<script setup lang="ts" name="McpTemplateNode">
import { watch } from 'vue'
import { Handle, Position, useVueFlow } from '@vue-flow/core'
import NodeContainer from './node_container.vue'


const props = defineProps({
    id: {
        type: String,
        required: true,
    },
    data: {
        type: Object,
        required: true,
    },
    selected: {
        type: Boolean,
        default: false,
    },
    dragging: {
        type: Boolean,
        default: false,
    },
})

watch(() => props.data, (newData, oldData) => {
    console.log('data changed', newData, oldData)
})

console.log("Node:", props.data)

</script>

<style scoped>
@import '@/assets/handle.css';

.model-name {
    font-weight: bold;
    margin-top: 5px;
    color: #333;
}
</style>